import { EditOutlined, DeleteOutlined, ShareAltOutlined } from '@ant-design/icons';
import { page, del, batDel, save, saveMenus, edit } from "@/views/sys/role/api";
import CloudTable from "@/component/CloudTable";
import { useTable, useTableDialog } from "@/hooks/useTable";
import { Button, message, Space, Tooltip } from 'antd';
import FormModal from '@/component/FormModal';
import { useFormDialog } from '@/hooks/useForm';
import { useEffect } from 'react';
import { treeByRole } from '@/views/sys/menu/api';
import TableDrawer from '@/component/TableDrawer';

const Role = () => {

    const onRoleFormCallback = (model) => {
        roleForm.onSubmit(model, roleTable.onReload);
    }

    // 表单操作
    const roleForm = useFormDialog({
        width: 450,
        save: save,
        edit: edit,
        callback: onRoleFormCallback,
        items: [
            {
                label: '名称',
                name: 'name',
                rules: [{ required: true, message: '请输入角色名称' }],
            },
            {
                label: '说明',
                name: 'description',
            },
        ],
    });

    // 表格工具栏
    const roleTools = () => {
        return (
            <Space>
                <Button type="primary" onClick={() => roleForm.isOpenDialog(undefined, '新增')} >新增</Button>
                <Button type='dashed' style={{ color: 'red' }} onClick={() => roleTable.onBatchRemove(roleTable.selected)}>删除</Button>
            </Space>
        );
    }

    // 表格列
    const roleColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            fixed: 'left',
            align: 'center',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '名称',
            key: 'name',
            dataIndex: 'name',
            ellipsis: true,
            width: 'auto',
            search: 'default'
        },
        {
            title: '说明',
            dataIndex: 'description',
            key: 'description',
            ellipsis: true,
            width: 'auto',
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (val, row) => (
                <div>
                    <Tooltip title="编辑">
                        <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => roleForm.isOpenDialog(row, '编辑')} />
                    </Tooltip>
                    <Tooltip title="分配菜单">
                        <Button type="text" size="small" icon={<ShareAltOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => menuTableDrawer.isOpenDialog(row.id)} />
                    </Tooltip>
                    <Tooltip title="删除">
                        <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => roleTable.onRemove(val)} />
                    </Tooltip>
                </div>
            )
        }
    ]

    // 表格操作
    const roleTable = useTable({
        columns: roleColumns,
        tools: roleTools,
        reload: page,
        remove: del,
        batchRemove: batDel
    });

    const menuColumns = [
        {
            title: '菜单名称',
            dataIndex: 'name',
            key: 'name',
            width: 'auto',
        },
    ];

    const onSaveMenusCallback = (model) => {
        saveMenus(model).then(resp => {
            if (resp?.data) {
                message.success('保存成功');
                menuTableDrawer.isOpenDialog();
            }
        });
    }

    // 菜单抽屉
    const menuTableDrawer = useTableDialog({
        width: 250,
        title: '菜单',
        columns: menuColumns,
        isPage: false,
        reload: treeByRole,
        callback: onSaveMenusCallback
    });

    useEffect(() => {
        roleTable.onReload();
    }, []);

    return (
        <>
            <CloudTable props={roleTable} />
            <FormModal props={roleForm} />
            <TableDrawer props={menuTableDrawer} submit={saveMenus} />
        </>
    )
}

export default Role;